<script>
import {defineComponent, toRefs, reactive, onMounted} from 'vue';
import Sidebar from '../common/Sidebar.vue';
import Header from '../common/Header.vue';
import axios from 'axios';
import {Plus, Search} from "@element-plus/icons-vue";

export default defineComponent({
  name: "Attraction",
  computed: {
    Search() {
      return Search
    }
  },
  components: {
    Plus,
    Sidebar,
    Header,
  },
  data() {
    return {
      AttractionList : [],
      editingAttractionRow: null,
      searchQuery: '',
    }
  },
  watch: {
    // 监听searchQuery的变化
    searchQuery(newValue, oldValue) {
      // 当searchQuery的值变化时，调用这个函数
      // 你可以在这里执行任何你需要的逻辑
      this.searchAttraction(newValue);
    },
  },
  mounted() {
    // 在组件挂载时发送请求获取商品信息
    this.fetchAttraction();
  },
  methods:{
    async searchAttraction(keyword){
      await axios.get(`http://localhost:8081/searchscenicSpot?keyword=${keyword}`).then(response => {
        this.AttractionList = response.data;
      });
    },
    addRow() {
      const newRow = {
        id: this.AttractionList[this.AttractionList.length-1].id+1,// 根据实际情况，可能需要生成一个唯一的ID
        name: '空',
        maxCapacity: 0,
        parkingLotCapacity: 0,
        geographicLocation: '空',
        electronicMapURL: '空',
        score:'60',
      };
      this.AttractionList.push(newRow);
      this.editingAttractionRow = this.AttractionList.length-1;
      axios.post(`http://localhost:8081/insertscenicSpot`, {
        id: newRow.id,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
      axios.post(`http://localhost:8081/insertrealtimeInfo`, {
        id: newRow.id,
        scenicAreaID: newRow.id,
        availableParkingSpaces:0,
        visitorCount:0,
        timestamp:null,
      }, {
        headers: {
          'Content-Type':'application/json',
        },
      })
    },
    handleAttractionEdit(index) {
      this.editingAttractionRow = index;
    },
    async handleAttractionEditEnd(index) {
      // 可以在这里添加保存逻辑
      this.editingAttractionRow = null;
      await axios.post("http://localhost:8081/updatescenicSpot", {id: this.AttractionList[index].id,
        name: this.AttractionList[index].name,
        electronicMapURL: this.AttractionList[index].electronicMapURL,
        geographicLocation: this.AttractionList[index].geographicLocation,
        parkingLotCapacity : this.AttractionList[index].parkingLotCapacity,
        maxCapacity: this.AttractionList[index].maxCapacity,
        score: this.AttractionList[index].score,
      },{headers: {
          'Content-Type':'application/json',
        },})
          .then(response => {
            // 请求成功，处理响应
            console.log('景区信息更新成功', response.data);
            // 你可以在这里根据响应更新UI或进行其他操作
          })
          .catch(error => {
            // 请求失败，处理错误
            if (error.response) {
              // 服务器返回了错误信息
              console.error('更新景区信息失败:', error.response.data);
            } else if (error.request) {
              // 请求已经发起，但没有收到响应
              console.error('请求已发送，但没有收到响应');
            } else {
              // 设置请求时触发了错误
              console.error('请求配置中发生错误');
            }
            // 在这里可以添加一些额外的错误处理逻辑，比如通知用户
          });
    },

    async deleteAttraction(id){
      await axios.get(`http://localhost:8081/deletescenicSpot?id=${id}`);
      await axios.get(`http://localhost:8081/deleterealtimeInfo?id=${id}`)
      this.fetchAttraction();
    },

    viewAttraction(id) {
      this.$router.push(`/attraction/detailAttraction/${id}`);
    },
    fetchAttraction() {

      axios.get('http://localhost:8081/scenicSpot') // 根据实际情况修改接口地址
          .then(response => {
            this.AttractionList = response.data;
          })
          .catch(error => {
            console.error('获取景区列表失败:', error);
          });
    },
  },
})

</script>

<template>
  <body>
  <el-col style="height: 100%;">
    <Header />
    <el-row style="height: 100%;">
      <el-col :span="3" style="height: 100%;">
        <Sidebar />
      </el-col>

      <el-col :span="21" style="height: 100% ;text-align: center;overflow-y: auto;" >

        <div class="background-image">
        <h1 style="display: flex;justify-content: center">所有景区</h1>
        <el-card >
          <el-input type="text" v-model="searchQuery" placeholder="输入名称" style="width: 300px " :suffix-icon="Search"></el-input>
        <el-table :data="AttractionList" stripe height=70% style="width: 100%">
          <el-table-column fixed prop="id" label="景区编号" width="150" />
          <el-table-column prop="name" label="景区名" width="120" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAttractionRow === scope.$index" v-model="scope.row.name" @blur="handleAttractionEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAttractionEdit(scope.$index)">
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="maxCapacity" label="景区最大承载游客数" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAttractionRow === scope.$index" v-model="scope.row.maxCapacity" @blur="handleAttractionEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAttractionEdit(scope.$index)">
                {{ scope.row.maxCapacity }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="parkingLotCapacity" label="景区停车位数量" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAttractionRow === scope.$index" v-model="scope.row.parkingLotCapacity" @blur="handleAttractionEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAttractionEdit(scope.$index)">
                {{ scope.row.parkingLotCapacity }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="geographicLocation" label="景区地址" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAttractionRow === scope.$index" v-model="scope.row.geographicLocation" @blur="handleAttractionEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAttractionEdit(scope.$index)">
                {{ scope.row.geographicLocation }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="electronicMapURL" label="景区经纬度" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAttractionRow === scope.$index" v-model="scope.row.electronicMapURL" @blur="handleAttractionEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAttractionEdit(scope.$index)">
                {{ scope.row.electronicMapURL }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="信誉分" width="200" align="center">
            <template v-slot="scope">
              <!-- 使用作用域插槽的 scope.row 来访问当前行的数据 -->
              <el-input v-if="editingAttractionRow === scope.$index" v-model="scope.row.score" @blur="handleAttractionEditEnd(scope.$index)"></el-input>
              <div v-else @click="handleAttractionEdit(scope.$index)">
                {{ scope.row.score }}
              </div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="viewAttraction(scope.row.id)">详情</el-button>
              <el-button link type="primary" @click="deleteAttraction(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <template #footer><el-button color="#9d2933" circle size="large" plain @click="addRow" ><el-icon><plus/></el-icon></el-button></template>
        </el-card>
        </div>
      </el-col>
    </el-row>
  </el-col>
  </body>
</template>

<style scoped>
@import "../../assets/css/global.css";
.background-image {
  height: 100vh; /* 使容器高度占满视口 */
  display: flex; /* 使用 flexbox 居中内容 */
  flex-direction: column;
  align-items: center;
  background-image: url('/bg1.png');
  background-size: cover; /* 覆盖整个容器 */
  background-position: center; /* 图片居中 */
}
</style>